<!-- <template>
  <van-popup v-model:show="localShow" position="bottom" :style="{ height: popupHeight }">
    <div class="popup-content">
      <slot name="left" class="left-slot"></slot>
      <slot name="right" class="right-slot"></slot>
    </div>
  </van-popup>
</template> -->

<template>
  <van-popup v-model:show="localShow" position="bottom" :style="{ height: popupHeight }">
    <div class="popup-content">
      <!-- 左侧按钮 -->
      <div class="popup-content-left" @click="$emit('left-click')">
        <slot name="left-icon">
          <!-- <i class="iconfont icon-shoudongshangchuan"></i> -->
        </slot>
        <slot name="left-text">
          <!-- <span class="popup-content-left-text">手动上传</span> -->
        </slot>
      </div>

      <!-- 右侧按钮 -->
      <div class="popup-content-right" @click="$emit('right-click')">
        <slot name="right-icon">
          <!-- <i class="iconfont icon-shoudongshangchuan"></i> -->
        </slot>
        <slot name="right-text">
          <!-- <span class="popup-content-right-text">AI 生成</span> -->
        </slot>
      </div>
    </div>
  </van-popup>
</template>

<script setup>
import { ref, computed } from 'vue';

const props = defineProps({
  show: Boolean,
  popupHeight: {
    type: String,
    default: '30%'
  },

});

const emit = defineEmits(['update:show']);

const localShow = computed({
  get() {
    return props.show;
  },
  set(value) {
    emit('update:show', value);
  }
});
</script>

<style lang="less" scoped>
.popup-content {
  display: flex;
  align-items: center;
  height: 100%;

  &-left,
  &-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgb(231, 235, 237);
    height: 80%;
    margin: 16px;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2); // 更加明显的阴影

    :deep(.iconfont) {
      font-size: 40px;
    }

    :deep(span) {
      margin-top: 26px;
      font-size: 0.4rem;
    }
  }
}
</style>